import { Layout } from 'antd'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import { changeCollapsed, SettingInitialState } from '@/redux/slices/setting.slice'
import { useGetState } from '@/hooks/useRedux'
import Refresh from './refresh'
import Message from './message'
import UserInfo from './userInfo'
import Search from './search'

export default function HeaderBar() {
    const dispatch = useDispatch()
    const setting = useGetState<SettingInitialState>('setting')

    return (
        <Layout.Header>
            <div className="left cursor-pointer">
                <div
                    onClick={() => {
                        dispatch(changeCollapsed(!setting.collapsed))
                    }}
                >
                    {setting.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                </div>
            </div>
            <div className="right">
                <Search />
                <Refresh />
                <Message />
                <UserInfo />
            </div>
        </Layout.Header>
    )
}
